<template>
  <div class="nav">
    <ul>
      <li
        class="menus_item"
        :class="routeName==val.pathName? 'on': ''"
        v-for="(val, ind) in menus"
        :key="ind"
        @click="$emit('menu-click', val)"
      >
        {{ val.name }}
      </li>
    </ul>
  </div>
</template>
<script setup>
defineProps({
  menus: Array,
  routeName: [String, Number]
})
</script>
<style scoped lang="scss">
// ...把 nav 相关样式复制过来...
.nav {
  width: 200px;
  background: #096dd9;
  flex-shrink: 0;
  color: #ececec;

  .menus_item {
    cursor: pointer;
    &.on {
      background: #6fb5ff;
      font-weight: bold;
    }
    &:hover {
      background: #6fb5ff;
    }
  }
}
.nav ul {
  padding: 10px;
}
.nav ul li {
  list-style: none;
  padding: 10px 15px;
  margin: 2px 0;
}
</style>
